<template>
	<view class="group">
		<template v-if="groupDetail">
			<template v-if="groupDetail.canViewContent">
				<!-- 聊天模式 -->
				<template v-if="groupType == 1">
					<view class="follow-info" @click="clickGroupButton('follow')">
						<text class="iconfont icon-aixin"></text>
						<text class="text">
							{{groupDetail.interaction.followStatus?"已关注":"未关注"}}
						</text>
					</view>
					<list-conversation
						:listGid="listGid"></list-conversation>
				</template>
				<!-- 打卡模式 -->
				<template v-if="groupType == 2">
					<list-record
						:listGid="listGid"
						:recordConfig="recordConfig"
						ref="refListRecord"></list-record>
				</template>
				<!-- diy模式 -->
				<template v-if="groupType == 3">
					<template v-if="allGroupConfig">
						<template v-if="allGroupConfig.groupTypeDiyInfo">
							<view
								class="diy-group-header"
								:style="groupDetail.banner?`background: #ffe60f url(${groupDetail.banner}) no-repeat;background-size: 100% 100%;background-position: center;`:`background: #ffe60f url(${allGroupConfig.groupTypeDiyInfoBannerImage}) no-repeat;background-size: 100% 100%;background-position: center;`"
								v-if="groupDetail">
								<view class="_top">
									<view class="cover" v-if="groupDetail.cover">
										<image :src="groupDetail.cover" mode="widthFix"></image>
									</view>
									<view class="_right">
										<view class="gname">{{groupDetail.gname}}</view>
										<view class="description">{{groupDetail.description}}</view>
									</view>
								</view>
								<view class="group-info">
									<text>帖子:{{groupDetail.postCount}}</text>
									<text>回复:{{groupDetail.commentCount}}</text>
									<text>获赞:{{groupDetail.likeCount}}</text>
									<text>关注:{{groupDetail.followCount}}</text>
								</view>
								<view class="group-button">
									<view
										:style="groupDetail.interaction.likeStatus?'background: #F56C6C;':''"
										v-if="groupDetail.interaction.likeSetting"
										@click="clickGroupButton('like')">
										<text class="iconfont icon-good"></text>
										<text>{{groupDetail.interaction.likeStatus?"已点赞":"点赞"}}</text>
									</view>
									<view
										:style="groupDetail.interaction.followStatus?'background: #409EFF;':''"
										v-if="groupDetail.interaction.followSetting"
										@click="clickGroupButton('follow')">
										<text class="iconfont icon-favorite"></text>
										<text>{{groupDetail.interaction.followStatus?"已关注":"未关注"}}</text>
									</view>
									<view
										v-if="groupDetail.publishRule.allowPost"
										@click="$_To(`editor/editor?type=new&gid=${listGid}&gname=${groupDetail.gname}`)"
										class="editor-button">
										<text class="iconfont icon-chuangzuo"></text>
										<text>发帖</text>
									</view>
								</view>
							</view>
						</template>
					</template>
					<youran-diy
						:Config="config"
						:listGid="listGid"
						v-if="youranDiyState"
						ref="childRef"></youran-diy>
				</template>
			</template>
			<template v-else>
				<template v-if="groupDetail.followType == 1">
					<view class="unconditional-follow">
						<view class="reminder-information">
							<text class="iconfont icon-prompt-filling"></text>
							<text class="text">只有小组成员才能查看小组内帖子</text>
						</view>
						<view class="follow-button" @click="clickGroupButton('follow')">
							<view>关注本组</view>
						</view>
					</view>
				</template>
				<template v-if="groupDetail.followType == 3">
					<mp-html
						:content="unauthorizedAccess"
						:selectable="true"/>
				</template>
			</template>
		</template>
		<template v-else>
			<public-loading></public-loading>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupDetail:null,
				youranDiyState:true,
				config:"group.json",
				listGid:"",
				groupType:3, // 1.聊天模式 | 2.打卡模式 | 3.diy模式
				unauthorizedAccess:"",//如果组关闭关注，且指定用户组访问，如果用户无权访问的提示信息
				recordConfig:null,
				allGroupConfig:null,// 请求 group.json
			}
		},
		mounted(){
			// 打卡标签
			uni.$on('listRecord',(data) => {
				this.$refs.refListRecord.listState = 'loading';
				this.$refs.refListRecord.getRecordDataToday();
			})
			// 重新加载
			uni.$on('reload',(data) => {
				this.youranDiyState = false;
				setTimeout(() => {
					this.youranDiyState = true;
				}, 100);
			})
		},
		onUnload() {
			uni.$off('listRecord')
			uni.$off('reload')
		},
		onLoad(e) {
			this.listGid = e.gid;
			this.getGroupDetail()
		},
		methods: {
			// 触底事件
			onReachBottom(){
				if(this.$store.state.onReachBottomStatus){
					this.$store.commit('mutationsStateonReachBottomStatus',false)
					this.$refs.childRef.onReachBottomMethods();
				}
			},
			// 组，详情
			getGroupDetail(){
				this.$_Request(
					"GET","/api/v2/group/"+this.listGid+"/detail",{},
					(res) => {
						this.groupDetail = res.data.data.detail;
						uni.setNavigationBarTitle({ title: this.groupDetail.gname })
						this.getDiyComponents();
					}
				)
			},
			// 请求diy组件
			getDiyComponents(){
				uni.request({
					url:`${this.$_Config()}group_${this.listGid}.json`,
					method:'GET',
					success: (res) => {
						if(res.statusCode == 404){ // 默认
							this.config = `group.json`;
							this.groupType = 3;
							this.getAllGroupConfig();
						}else{ // 自定义
							this.config = `group_${this.listGid}.json`;
							this.groupType = res.data.groupType;
							if(res.data.unauthorizedAccess){
								this.unauthorizedAccess = res.data.unauthorizedAccess;
							}
							if(res.data.recordConfig){
								this.recordConfig = res.data.recordConfig;
							}
							this.allGroupConfig = res.data;
						}
					}
				})
			},
			// 请求 group.json
			getAllGroupConfig(){
				uni.request({
					url:this.$_Config() + "group.json",
					success: (res) => {
						this.allGroupConfig = res.data;
					}
				})
			},
			// 点击小组操作按钮
			clickGroupButton(type){
				uni.showLoading();
				this.$_Request(
					"POST","/api/v2/user/mark",
					{
						"interactionType":type,
						"markType":"group",
						"fsid":this.listGid
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code == 0){
							this.getGroupDetail()
						}else{
							uni.showToast({
								title: res.data.message,
								icon: "none", 
								duration: 1000
							});
						}
					}
				)
			},
		},
		// 微信分享
		onShareAppMessage(res) {
			return {
				title: this.groupDetail.gname,
				path: '/pages/group/group?gid=' + this.listGid
			}
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: this.groupDetail.gname,
				path: '/pages/group/group?gid=' + this.listGid
			}
		},
		// 下拉，加载
		onPullDownRefresh() {
			this.youranDiyState = false;
			setTimeout(() => {
				this.youranDiyState = true;
				uni.stopPullDownRefresh();
			}, 100);
		},
	}
</script>

<style lang="scss">
.group{
	.diy-group-header{
		padding:25rpx;
		._top{
			display: flex;
			.cover{
				width: 140rpx;
				height: 140rpx;
				margin-right: 25rpx;
				border-radius: 100rpx;
				overflow: hidden;
				border:10rpx solid #FFF;
				box-shadow: 0 0 5rpx #000;
				flex-shrink: 0;
			}
			._right{
				.gname{
					font-size: 40rpx;
					color: #FFF;
					text-shadow: 0 0 1rpx #000;
					display: -webkit-box;
					/*!autoprefixer:off*/
					-webkit-box-orient: vertical;
					/*autoprefixer:on*/
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
				.description{
					color: #FFF;
					text-shadow: 0 0 1rpx #000;
					font-size: 28rpx;
					line-height: 40rpx;
					margin-top: 15rpx;
					display: -webkit-box;
					/*!autoprefixer:off*/
					-webkit-box-orient: vertical;
					/*autoprefixer:on*/
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}
		}
		.group-info{
			display: flex;
			align-items: center;
			justify-content:space-between;
			margin-top: 25rpx;
			text{
				color: #FFF;
				text-shadow: 0 0 1rpx #000;
				font-size: 28rpx;
				line-height: 28rpx;
			}
		}
		.group-button{
			display: flex;
			align-items: center;
			margin-top: 25rpx;
			view{
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1rpx solid #FFF;
				margin-right: 25rpx;
				padding: 10rpx 20rpx;
				border-radius: 100rpx;
				text{
					color: #FFF;
					font-size: 28rpx;
					line-height: 28rpx;
					text-shadow: 0 0 1rpx #000;
				}
				.iconfont{
					font-size: 35rpx;
					line-height: 35rpx;
					padding-right: 5rpx;
				}
			}
			.editor-button{
				margin-left: auto;
				margin-right: 0;
			}
		}
	}
	.follow-info{
		margin: 25rpx 25rpx 0 25rpx;
		background: $LanSe;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 25rpx 0;
		border-radius: 10rpx;
		.icon-aixin{
			color: #FFF;
			font-size: 50rpx;
			line-height: 50rpx;
		}
		.text{
			color: #FFF;
			font-size: 28rpx;
			line-height: 28rpx;
			padding-left: 15rpx;
		}
	}
	.unconditional-follow{
		.reminder-information{
			display: flex;
			flex-flow: column;
			align-items: center;
			justify-content: center;
			margin: 100rpx 50rpx 0 50rpx;
			.icon-prompt-filling{
				font-size: 100rpx;
				line-height: 100rpx;
				padding-bottom: 50rpx;
				color: $HongSe;
			}
			.text{
				font-size: 32rpx;
				line-height: 32rpx;
				color: $HongSe;
			}
		}
		.follow-button{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 50rpx;
			view{
				background: $LanSe;
				border: 1rpx solid $BianKuangSe;
				width: 200rpx;
				height: 80rpx;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				line-height: 28rpx;
				color: #FFF;
			}
		}
	}
}
</style>
